<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>妙蛙种子教育管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <style>
        /* 移动端 */
        @media screen and (max-width: 768px) {
            .layui-layout-admin .layui-layout-left,
            .layui-layout-admin .layui-body,
            .layui-layout-admin .layui-footer{left: 0;}
            .layui-layout-admin .layui-side{left: -300px;}
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">妙蛙种子教育</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="">数据概况</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">交易分析</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">商品分析</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">用户分析</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="../img/default.jpg" class="layui-nav-img">
                    张三
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:;"
                           data-options="{url:'page/employee.html',title:'基本资料',id:15}">基本资料</a>
                    </dd>
                    <dd>
                        <a href="javascript:;"
                           data-options="{url:'page/employee.html',title:'更换头像',id:16}">更换头像</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="">退出</a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'userlist/user.html',title:'用户列表',id:1}">用户列表</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'userlist/teacher.html',title:'教师列表',id:2}">教师列表</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">内容管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'CourseInformation.jsp',title:'文章管理',id:3}">文章管理</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'GradeInformation.jsp',title:'分类管理',id:4}">分类管理</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">年级分类</a>
                    <dl class="layui-nav-child">
                        <dd>
                        <a href="javascript:;"
                           data-options="{url:'userlist/grade.html',title:'年级分类',id:5}">年级分类</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">直播课堂</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'Position.jsp',title:'语音大课堂',id:6}">语音大课堂</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'College.jsp',title:'视频大课堂',id:7}">视频大课堂</a>
                        </dd>
                    </dl>
                </li>

                <li class="layui-nav-item">
                    <a href="javascript:;">科目分类</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'userlist/subject.html',title:'科目分类',id:8}">科目分类</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;" data-options="{url:'GradeInformation.jsp',title:'订单管理',id:9}">订单管理</a></li>
                <li class="layui-nav-item"><a href="javascript:;" data-options="{url:'GradeInformation.jsp',title:'系统消息',id:10}">系统消息</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">知识付费管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'Position.jsp',title:'知识付费分类',id:11}">知识付费分类</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"
                               data-options="{url:'College.jsp',title:'精选内容',id:12}">精选内容</a>
                        </dd><dd>
                        <a href="javascript:;"
                           data-options="{url:'College.jsp',title:'精选热门列表',id:13}">精选热门列表</a>
                    </dd>

                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;" data-options="{url:'GradeInformation.jsp',title:'系统消息',id:14}">新闻管理</a></li>


            </ul>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-allowClose="true" lay-filter="body-context">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>

    <div class="layui-footer">

    </div>
</div>

<script src="../layui/layui.js"></script>
<script src="../js/jquery-1.8.2.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
        /*使用下面的方式需要引用jquery*/
        /*菜單点击 a 事件*/
        $('.layui-nav-child a').click(function() {
            //获得点击的a 元素的 data-options  值

            var options = eval('(' + $(this).data('options') + ')');
            var url = options.url;
            var title = options.title;
            var id = options.id;
            //是否打开过
            var open = false; //默认没有打开过
            //循环判断
            $(".layui-tab-title").children("li").each(function(index, obj) {
                if($(obj).attr("lay-id") == id) {
                    open = true;
                }
            });
            //判断是否被打开过
            if(!open) {
                //没打开新打开
                element.tabAdd('body-context', {
                    title: title,
                    content: '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>',
                    id: id
                });
            }
            //当前被点击的菜单 内容显示
            element.tabChange('body-context', id);
            FrameWH();//计算框架高度
        });

        function FrameWH() {
            var h = $(window).height() -100;
            $("iframe").css("height",h+"px");
        }
    });
</script>
</body>